<template>
  <view class="container">
    <!-- 顶部固定区域 -->
    <view class="header">
      <!-- 分类导航 -->
      <view class="category-nav">
        <view
          v-for="(category, index) in categories" 
          :key="index"
          :class="{ 'active': currentCategory === category }"
          @click="handleCategoryChange(category)"
        >
          {{ category }}
        </view>
      </view>
      <!-- 搜索框 -->
      <view class="search-box">
        <input
          type="text"
          v-model="keywords"
          placeholder="搜索文章标题或摘要..."
          @input="handleSearch"
        />
      </view>
    </view>

    <!-- 轮播图 -->
    <swiper
      class="swiper"
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
    >
      <swiper-item v-for="(banner, index) in banners" :key="index">
        <image :src="banner.imgUrl" mode="widthFix"></image>
        <view class="swiper-text">{{ banner.title }}</view>
      </swiper-item>
    </swiper>

    <!-- 热门推荐 -->
    <view class="hot-recommend">
      <text class="section-title">热门推荐</text>
      <view class="hot-list">
        <view
          v-for="(article, index) in hotArticles" 
          :key="index"
          class="hot-item"
          @click="goToDetail(article.id)"
        >
          <image :src="article.cover" mode="widthFix"></image>
          <text class="hot-title">{{ article.title }}</text>
        </view>
      </view>
    </view>

    <!-- 文章列表 -->
    <view class="article-list">
      <view
        v-for="(article, index) in filteredArticles" 
        :key="index"
        class="article-card"
        @click="goToDetail(article.id)"
      >
        <image :src="article.cover" class="card-cover" mode="widthFix"></image>
        <view class="card-info">
          <text class="card-title">{{ article.title }}</text>
          <text class="card-summary">{{ article.summary }}</text>
          <view class="card-meta">
            <text class="meta-item">{{ article.date }}</text>
            <text class="meta-item">作者：{{ article.author }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 修改点：添加"全部"分类并设置为当前分类
      categories: ['全部', '技术', '生活', '旅行', '美食'],
      currentCategory: '全部',
      keywords: '',
      banners: [
        { id: 1, title: '最新技术分享', imgUrl: '/static/banner/computer.jpg' },
        { id: 2, title: '生活趣事集锦', imgUrl: '/static/banner/fun.jpg' },
        { id: 3, title: '旅行攻略汇总', imgUrl: '/static/banner/travel.jpg' }
      ],
      articles: [
        { id: 1, category: '技术', title: 'Vue3新特性解析', summary: '深入讲解Vue3组合式API和响应式系统', cover: '/static/index/tech.jpg', date: '2024-03-15', author: '张三', views: 1200, likes: 200 },
        { id: 2, category: '生活', title: '周末家庭野餐', summary: '分享自制三明治和水果拼盘的制作方法', cover: '/static/index/picnic.jpg', date: '2024-03-14', author: '李四', views: 800, likes: 150 },
        { id: 3, category: '旅行', title: '大理七日游', summary: '记录苍山洱海的美丽风光和特色民宿', cover: '/static/index/travel.jpg', date: '2024-03-13', author: '王五', views: 1500, likes: 300 }
      ]
    }
  },
  computed: {
    filteredArticles() {
      return this.articles.filter(article => {
        const categoryMatch = this.currentCategory === '全部' || article.category === this.currentCategory;
        const keywordMatch = article.title.includes(this.keywords) || article.summary.includes(this.keywords);
        return categoryMatch && keywordMatch;
      });
    },
    hotArticles() {
      return [...this.articles].sort((a, b) => b.views - a.views).slice(0, 3);
    }
  },
  methods: {
    handleCategoryChange(category) {
      this.currentCategory = category;
    },
    handleSearch() {
      // 可添加防抖逻辑
    },
    goToDetail(id) {
      uni.navigateTo({ url: `/pages/article/detail?id=${id}` });
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
  z-index: 100;
}

.category-nav {
  display: flex;
  overflow-x: auto;
  padding-bottom: 20rpx;
}
.category-nav view {
  margin-right: 40rpx;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  white-space: nowrap;
}
.category-nav view.active {
  background-color: #42b983;
  color: white;
}

.search-box input {
  height: 60rpx;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  padding: 0 30rpx;
}

.swiper {
  margin-top: 200rpx;
  height: 500rpx;
}
.swiper image {
  height: 100%;
  width: 100%;
}
.swiper-text {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  color: white;
  font-size: 32rpx;
  text-shadow: 0 0 10rpx rgba(0,0,0,0.5);
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  padding: 30rpx 20rpx;
  color: #333;
}

.hot-list {
  display: flex;
  overflow-x: auto;
  padding: 0 20rpx;
}
.hot-item {
  margin-right: 30rpx;
  flex-shrink: 0;
  width: 240rpx;
}
.hot-item image {
  width: 240rpx;
  height: 180rpx;
  border-radius: 16rpx;
}
.hot-title {
  font-size: 28rpx;
  margin-top: 10rpx;
  color: #666;
}

.article-list {
  padding: 20rpx;
}
.article-card {
  background-color: white;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  transition: transform 0.2s;
}
.article-card:hover {
  transform: translateY(-4rpx);
}
.card-cover {
  width: 100%;
  max-height: 500rpx;
  object-fit: cover;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}
.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}
.card-summary {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15rpx;
}
.card-meta {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}
.card-meta .meta-item {
  margin-right: 30rpx;
}

@media (max-width: 768px) {
  .card-cover {
    height: 240rpx;
  }
  .category-nav view {
    font-size: 28rpx;
  }
}
</style>